import React, { Component } from 'react';

import store from './store';

import axios from 'axios';

import * as types from './store/types'

// 3. 导入 connect 用来连接状态管理和页面视图
import { connect } from 'react-redux';

class App extends Component {

  // componentDidMount(){
  //   fetch('/banner/list').then(res => res.json()).then(res => {
  //     // console.log(res.data);
  //     // 将请求成功的数据放在全局状态管理中
  //     store.dispatch({type: types.CHANGE_BANNER_LIST, payload: res.data})
  //   })

  //   axios.get('/pro/list').then(res => {
  //     console.log(res.data.data);
  //     store.dispatch({type: types.CHANGE_PRO_LIST, payload: res.data.data})
  //   })
  // }

  render() {

    console.log(this.props);

    return (
      <div>

        <div>
          <h1>{this.props.count}</h1>
          <button onClick={()=>{this.props.add()}}>加 1</button>
          <button onClick={()=>{this.props.reduce()}}>减 1</button>
          <button onClick={()=>{this.props.addNum(5)}}>加指定数</button>
          <button onClick={()=>{this.props.reduceNum(5)}}>减指定数</button>
        </div>

      </div>
    );
  }
}

// 将全局状态中的数据添加在当前组件的 props 属性中
const mapStateToProps = (state)=>{

  // return 出去的内容会被映射到 App 组件的 props 中
  return {
    count: state.app.count
  }
}

// 将全局状态的修改方法映射到组件的 props 中
const mapDispatchToProps = (dispatch) => {

  // return 出去的内容就是被添加到 App 组件的 props 中的内容
  return {
    add(){
      dispatch({type: types.ADD})
    },
    reduce(){
      dispatch({type: types.REDUCE})
    },
    addNum(value){
      dispatch({type: types.ADD_NUM, payload: value})
    },
    reduceNum(value){
      dispatch({type: types.REDUCE_NUM, payload: value})
    }
  }
}

// connect() 是一个函数，有一个返回值
// 返回值是一个高阶组件
export default connect(mapStateToProps, mapDispatchToProps)(App);
